<template>
  <view class="bottom">
    <view class="nav-box">
      <view class="nav-tab" :class="{'nav-tab-active':index===0}" @click="handelSwitchTab(0)">
        <uni-icons type="home" size="30"></uni-icons>
      </view>
      <view class="nav-tab" :class="{'nav-tab-active':index===1}" @click="handelSwitchTab(1)">
        <uni-icons type="vip" size="30">
        </uni-icons>
      </view>
      <view class="nav-tab" :class="{'nav-tab-active':index===2}" @click="handelSwitchTab(2)">
        <uni-icons type="map-filled" size="30"></uni-icons>
      </view>
      <view class="nav-tab" :class="{'nav-tab-active':index===3}" @click="handelSwitchTab(3)">
        <uni-icons type="person" size="30"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    index: {
      type: Number,
      default: 0
    }
  },
  methods: {
    handelSwitchTab(index) {
      if (index === 0) {
        uni.switchTab({
          url: '/pages/photo/list/list'
        })
      } else if (index == 1) {
        uni.switchTab({
          url: '/pages/photo/index'
        })
      } else if (index == 2) {
        uni.switchTab({
          url: '/pages/photo/3D/index'
        })
      } else if (index == 3) {
        uni.switchTab({
          url: '/pages/photo/user/index'
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.bottom {
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 65rpx;
  z-index: 6;
  display: flex;
  align-items: center;
  box-shadow: 0 0px 8px 0px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);

  .nav-box {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 400rpx;
    height: 100%;
    box-sizing: border-box;
    padding: 12rpx 0;

    .nav-tab {
      border-radius: 50%;
      width: 88rpx;
      height: 88rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: .5s;
      box-shadow: 3px 2px 5px rgba(0, 0, 0, 0.25);
    }

    .nav-tab-active {
      box-shadow: inset 3px 2px 5px rgba(255, 255, 255, 0.25);
      background: #6b76ec;
    }
  }
}
</style>
